<template>
  <div class="bg">
    <img class="ydLogo" src="../../assets/img/login&&register/云顶logo.png" alt="" />
    <div class="content">
      <div class="titleOne">
        <img class="pencil" src="../../assets/img/login&&register/铅笔.png" alt="" />
        <span class="titleText">作 业</span>
      </div>
      <div class="titleTwo">
        <div class="line lineLeft"></div>
        <div class="titleText">提交系统</div>
        <div class="line lineRight"></div>
      </div>
      <div class="photo">
        <img class="photo" src="../../assets/img/login&&register/个人.png" alt="" />
      </div>
      <router-view></router-view>
      <!-- 这里注意把每个模块的按钮写在组件内部 -->
      <!-- <router-link :to="{ path: '/login' }">登录</router-link>
      <router-link :to="{ path: '/login/registered' }">注册</router-link> -->
    </div>
    <img class="ysLogo" src="../../assets/img/login&&register/云深logo.png" alt="" />
  </div>
</template>

<script>
export default {
  name: '',
};
</script>

<style lang="less" scoped>
.bg {
  position: relative;
  .body-size();
  background-image: url('../../assets/img/public/bg.jpg');
  .bg-maker();
  color: #fff;
}
.ydLogo {
  width: 4vw;
  position: absolute;
  left: 3vw;
  top: 3vh;
}
.ysLogo {
  width: 8vw;
  position: absolute;
  right: 6vw;
  bottom: 6vh;
}
.title-bar {
  margin: 0 auto;
  width: 500px;
  height: 50px;
  text-align: center;
}
.content {
  width: 800px;
  margin: 0 auto;
  height: 600px;
}
.content .titleOne {
  position: relative;
  width: 17vw;
  height: 12vh;
  margin: 0 auto;
  top: 5vh;
}
.titleOne .pencil {
  position: absolute;
  width: 2.5vw;
  left: 1vh;
  top: 1vh;
}
.titleOne .titleText {
  position: absolute;
  font-size: 40px;
  font-weight: 200;
  right: 5vw;
  top: 0.2vh;
  letter-spacing: 0.4vw;
}
.content .titleTwo {
  position: relative;
  width: 21vw;
  height: 5vh;
  margin: 0 auto;
  top: 2vh;
}
.titleTwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2em;
  letter-spacing: 0.2vw;
}
.titleTwo .line {
  width: 5vw;
  height: 0.2vh;
  background-color: #fff;
}
.content .photo {
  position: relative;
  width: 5vw;
  margin: 0 auto;
  top: 1vh;
}
</style>
